<template>
    <view style="display: inline-block" v-if="show">
        <text class="uni-txt-countdown" v-if="type === 'second_text'">{{s}}{{secondText}}</text>
        <text class="uni-txt-countdown" v-else-if="type === 'text'">
            <text v-if="showDay">{{d}}{{dayText}}</text>
            <text>{{h}}{{showColon ? ':' : hourText}}{{i}}{{showColon ? ':' : minuteText}}{{s}}{{secondText}}</text>
        </text>
        <view class="uni-countdown" v-else>
            <view v-if="showDay" class="uni-countdown__number"
                  :style="{borderColor:borderColor, color:color, background:backgroundColor}">{{d}}
            </view>
            <view v-if="showDay" class="uni-countdown__splitor" :style="{color:splitorColor}">{{dayText}}</view>
            <view class="uni-countdown__number"
                  :style="{borderColor:borderColor, color:color, background:backgroundColor}">{{h}}
            </view>
            <view class="uni-countdown__splitor" :style="{color:splitorColor}">{{showColon ? ':' :hourText}}</view>
            <view class="uni-countdown__number"
                  :style="{borderColor:borderColor, color:color, background:backgroundColor}">{{i}}
            </view>
            <view class="uni-countdown__splitor" :style="{color:splitorColor}">{{showColon ? ':' :minuteText}}
            </view>
            <view class="uni-countdown__number"
                  :style="{borderColor:borderColor, color:color, background:backgroundColor}">{{s}}
            </view>
            <view v-if="!showColon" class="uni-countdown__splitor" :style="{color:splitorColor}">{{secondText}}</view>
        </view>
    </view>
</template>
<script>

    export default {
        name: "tl-countdown",
        props: {
            dayText: {
                type: String,
                default: "天"
            },
            hourText: {
                type: String,
                default: "时"
            },
            minuteText: {
                type: String,
                default: "分"
            },
            secondText: {
                type: String,
                default: "秒"
            },
            showDay: {
                type: Boolean,
                default: false
            },
            isNumber: {
                type: Boolean,
                default: false
            },
            showColon: {
                type: Boolean,
                default: true
            },
            backgroundColor: {
                type: String,
                default: "#FFFFFF"
            },
            borderColor: {
                type: String,
                default: "#000000"
            },
            color: {
                type: String,
                default: "#000000"
            },
            splitorColor: {
                type: String,
                default: "#000000"
            },
            value: {
                type: [Number, String, Object],
                default () {
                    return '';
                }
            },
            type: String,
            show: Boolean
        },
        computed: {},
        watch: {
            value () {
                this.interval()
            }
        },
        data () {
            return {
                timer: null,
                d: 0,
                h: 0,
                i: 0,
                s: 0,
                leftTime: 0,
                seconds: 0
            }
        },
        mounted: function (e) {
            this.interval()
        },
        beforeDestroy () {
            clearInterval(this.timer)
        },
        methods: {
            setSeconds () {
                const vm = this;
                const value = vm.value;
                const jude = this.$util.jude;
                let endTime = null;
                try {
                    if (typeof value === "string" || typeof value === "number") {
                        let time = value;
                        if (typeof time === "string") time = time.replace(/-/g, '/');
                        const time2 = new Date(time);
                        endTime = time2.getTime()
                    } else if (value.constructor === Date) {
                        endTime = value.getTime();
                    }
                } catch (e) {
                    return;
                }
                if (jude.isNumberOfNaN(endTime)) {
                    vm.seconds = (endTime - Date.now()) / 1000;
                } else if (!jude.isEmptyObject(value, true) && value.second > 0) {
                    vm.seconds = vm.toSeconds(value.day, value.hour, value.minute, value.second);
                }
            },
            interval () {
                let vm = this;
                clearInterval(vm.timer);
                vm.setSeconds();
                if (vm.seconds <= 0) return this.timeUp("expired");
                vm.countDown();
                vm.timer = setInterval(() => {
                    vm.seconds--;
                    if (vm.seconds < 0) return vm.timeUp("end");
                    vm.countDown()
                }, 1000)
            },
            toSeconds (day = 0, hours = 0, minutes = 0, seconds = 0) {
                return (day * 60 * 60 * 24) + (hours * 60 * 60) + (minutes * 60) + seconds
            },
            timeUp (type = 'end') {
                clearInterval(this.timer);
                this.d = '00';
                this.h = '00';
                this.i = '00';
                this.s = '00';
                this.numberHandle();
                this.$emit('timeup', type);
            },
            numberHandle () {
                if (this.isNumber) {
                    ['d', 'h', 'i', 'd'].forEach(value => {
                        const num = Number(this[value])
                        if (isNaN(num)) {
                            this[value] = 0
                        } else {
                            this[value] = num
                        }
                    })
                }
            },
            countDown () {
                let seconds = this.seconds;
                let type = this.type;
                let [day, hour, minute, second] = [0, 0, 0, 0];

                if (type === 'second_text') {
                    second = seconds;
                    if (second < 10 && !this.isNumber) {
                        second = '0' + second
                    }
                    this.s = second;
                    return this.$emit('change', {second})
                }

                if (seconds > 0) {
                    day = Math.floor(seconds / (60 * 60 * 24));
                    hour = Math.floor(seconds / (60 * 60)) - (day * 24);
                    minute = Math.floor(seconds / 60) - (day * 24 * 60) - (hour * 60);
                    second = Math.floor(seconds) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
                } else {
                    this.timeUp()
                }
                if (day < 10 && !this.isNumber) {
                    day = '0' + day
                }
                if (hour < 10 && !this.isNumber) {
                    hour = '0' + hour
                }
                if (minute < 10 && !this.isNumber) {
                    minute = '0' + minute
                }
                if (second < 10 && !this.isNumber) {
                    second = '0' + second
                }
                this.d = day + '';
                this.h = hour + '';
                this.i = minute + '';
                this.s = second + '';
                this.$emit('change', {day, hour, minute, second})
            }
        }
    }
</script>
<style lang="scss">
    $countdown-height: 44*1upx;

    .uni-countdown {
        padding: 2*1upx 0;
        display: inline-flex;
        flex-wrap: nowrap;
        justify-content: center;

        &__splitor {
            justify-content: center;
            line-height: $countdown-height;
            padding: 0 5*1upx;
            font-size: $uni-font-size-base;
        }

        &__number {
            line-height: $countdown-height;
            justify-content: center;
            height: $countdown-height;
            border-radius: $uni-border-radius-base;
            margin: 0 5*1upx;
            border: 1px solid #000000;
            font-size: $uni-font-size-sm;
            padding: 0 10*1upx;
        }
    }
</style>
